<template>
	<div class="login-box">
		<div class="logo">
			<!-- <img src="../../static/logo-login.png" alt=""/> -->
			<p>未登录</p>
			<p>请登录后再进行操作</p>
		</div>
			
			<button type="balanced" @click="getUniLogin">
					<span  class="my-btn">登录</span>
			</button>
		
		
		<van-action-sheet  @close="showEditUserInfo = false" :show="showEditUserInfo" title="请完善个人信息">
		  <view>
			   	<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			   	   <image class="user-img" :src='avatar'></image>
				</button>
				<view class='nickname'><input type='nickname' @change="blurNickName" name='nickname' v-model='userInfo.nickname' placeholder="请输入昵称"></input></view>
				
				<view @click="submitUserInfo" class="submit-btn">保存</view>
		  </view>
		</van-action-sheet>
	</div>
</template>
<script>
	const FormData = require('../../utils/wxFormdata/formData.js')
	export default {
		data() {
			return {
				visible: false,
				showEditUserInfo: false,
				avatar: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/logo1.png',
				userInfo: {
					avatar: '',
					nickname: '',
					// email: ''
				},
				callback: null
			}
		},
		mounted() {
			// uni.setNavigationBarTitle({
			// 　　title: '登录'
			// });
		},
		methods: {
			getUniLogin(e) {
			  this.$getUniLogin().then((res)=>{
				  console.log(111)
				  this.getInfo();
			  })
			},
			blurNickName(e) {
			 	this.userInfo.nickname = e.detail.value;
			 	// xxx
			 },
			getInfo () {
				this.$http.getUserInfo().then(res => {
					if(!res.nickname || !res.avatar) {
						this.showEditUserInfo = true;
						return;
					}
					// this.callback();
					this.$setStorage('userInfo',   res)
					this.goBack();
				})
			},
					
			onChooseavatar(e) {
				const {avatarUrl} = e.detail;
				this.avatar= avatarUrl;
				this.userInfo.avatar = avatarUrl;
			},
			submitUserInfo() {
				if(!this.userInfo.avatar) {
					return 	this.$toast('请上传用户头像！');
				}
				if(!this.userInfo.nickname) {
					return 	this.$toast('请填写用户昵称！');
				}
				let formData = new FormData();
				formData.append("nickname", this.userInfo.nickname);
				formData.appendFile("avatar", this.userInfo.avatar);
				// formData.append("email", '');
				let data = formData.getData();
				wx.request({
				  url: this.$getBaseUrl() + '/update-profile',
				  header: {
				    'content-type': data.contentType,
					'Accept': 'application/json,text/plain, */*',
					'Authorization': this.$getStorage('token') ?'Bearer '+ this.$getStorage('token') : ''
				  },
				  method: 'post',
				  data: data.buffer,
				  success: (res) => {
					  this.showEditUserInfo = false;
					  // this.callback();
					  this.$toast('登录成功');
					  this.$emit('loginSuccess', true);
				  }
				});
			},
			goBack() {
				
				uni.switchTab({
				    url: '/pages/index/index'
				});
				
				// const _this = this
				// uni.navigateBack({
				// 	delta:1,
				// 	success: function() {
						
				// 		console.log(2)
				// 		_this.reloadPage()
				// 	}
				// });
			},
			reloadPage() {
			  // 页面重载
			          const pages = getCurrentPages()
			          // 声明一个pages使用getCurrentPages方法
			          const curPage = pages[pages.length - 1]
			          // 声明一个当前页面
			          curPage.onLoad(curPage.options) // 传入参数
			          curPage.onShow()
			          curPage.onReady()
			
			}
			
		
		
			
		}
	}
</script>
<style lang="scss" scoped>
	.login-box {
		border-top: 1px solid #F1F1F1;
		.logo {
			padding: 91rpx 0 126rpx;
			text-align: center;
			img {
				width: 200rpx;
				height: 200rpx;
			}
			p {
				margin-top: 30rpx;
				color: #212121;
				font-size: 30rpx;
			}
		}
		.my-btn {
			width: 620rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 0 auto 39rpx;
			border-radius: 44rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			background-color: #FFD700 !important;
			color: #000!important;
			
			display: inline-block;
			
		}
	}
	.my-btn  {
	   background-color: #FFD700 !important;
	   color: #000!important;
	   border: none!important;
	}
	.user-img {
		margin: 50rpx auto  25rpx;
		width: 116rpx;
		height: 116rpx;
		display: inline-block;
		vertical-align: middle;
		border-radius: 50%;
	}
	.nickname {
		width: 200rpx;
		text-align: center;
		margin: 0 auto 60rpx;
	}
	.submit-btn {
		width: 260rpx;
		height: 76rpx;
		line-height:  76rpx;
		box-sizing: border-box;
		border-radius: 42rpx;
		font-size: 32rpx;
		background-color: #FFD700 !important;
		color: #000!important;
		border: none!important;
		text-align: center;
		margin: 0 auto 100rpx;
	}
</style>
